<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usergetComments, usercreateComments } from "@/api/user/comment";
import { getUserInfo } from "@/api/user/user";
import type { userComments } from "@/type/comment";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

interface Props {
  articleId: number;
  userId: number;
}

const props = defineProps<Props>();

interface CommentItem {
  id: number;
  content: string;
  createdAt: string;
  userId: number;
  userAvatar?: string;
  userNickname?: string;
}

const comments = ref<CommentItem[]>([]);
const currentPage = ref(1);
const loading = ref(false);
const commentContent = ref("");
const submitting = ref(false);

// 获取评论列表
const fetchComments = async () => {
  loading.value = true;
  try {
    const params: userComments = {
      articleId: props.articleId,
      currentPage: currentPage.value,
    };
    const response = await usergetComments(params);
    // 直接使用评论中包含的用户信息
    comments.value = response.data.comments.map((comment) => ({
      ...comment,
      userAvatar: comment.user.avatar,
      userNickname: comment.user.nickname || comment.user.username,
    }));
  } catch (error) {
    console.error("获取评论列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 提交评论
const submitComment = async () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning("评论内容不能为空");
    return;
  }

  submitting.value = true;
  try {
    await usercreateComments({
      articleId: props.articleId,
      content: commentContent.value.trim(),
      userId: props.userId,
    });
    ElMessage.success("评论发布成功");
    commentContent.value = "";
    fetchComments(); // 重新加载评论列表
  } catch (error) {
    console.error("发布评论失败:", error);
    ElMessage.error("发布评论失败，请重试");
  } finally {
    submitting.value = false;
  }
};

onMounted(() => {
  fetchComments();
});
</script>

<template>
  <div class="comment-list">
    <el-skeleton :loading="loading" animated :count="3">
      <template #template>
        <div class="comment-skeleton">
          <el-skeleton-item
            variant="circle"
            style="width: 40px; height: 40px"
          />
          <div style="flex: 1">
            <el-skeleton-item variant="text" style="width: 30%" />
            <el-skeleton-item variant="text" style="width: 100%" />
          </div>
        </div>
      </template>

      <template #default>
        <div v-if="comments.length > 0" class="comments-container">
          <div
            v-for="comment in comments"
            :key="comment.id"
            class="comment-item"
          >
            <el-avatar :size="40" :src="comment.userAvatar" />
            <div class="comment-content">
              <div class="comment-header">
                <span class="username">{{ comment.userNickname }}</span>
                <span class="time">{{
                  new Date(comment.createdAt).toLocaleString()
                }}</span>
              </div>
              <div class="comment-text">{{ comment.content }}</div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无评论" />
      </template>
    </el-skeleton>

    <div class="comment-input">
      <el-input
        v-model="commentContent"
        placeholder="写下你的评论..."
        class="input-with-button"
        @keyup.enter="submitComment"
      >
        <template #append>
          <el-button
            :icon="Plus"
            @click="submitComment"
            :loading="submitting"
          />
        </template>
      </el-input>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.comment-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.comment-skeleton {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.comments-container {
  flex: 1;
  overflow-y: auto;

  .comment-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .comment-content {
      flex: 1;

      .comment-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 4px;

        .username {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 2px;
        }

        .time {
          font-size: 12px;
          color: #999;
        }
      }

      .comment-text {
        color: #666;
        line-height: 1.5;
        margin-top: 4px;
        word-break: break-all;
      }
    }
  }
}

.comment-input {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;

  .input-with-button {
    display: flex;
    align-items: center;

    :deep(.el-input__wrapper) {
      border-radius: 20px 0 0 20px;
      padding-right: 0;
    }

    :deep(.el-input-group__append) {
      padding: 0;
      border-radius: 0 20px 20px 0;
      background-color: var(--el-color-primary);
      border: none;
      display: flex;
      align-items: center;

      .el-button {
        border: none;
        height: 32px;
        width: 40px;
        border-radius: 0 20px 20px 0;
        padding: 8px;
        color: white;
        margin: 0;

        &:hover {
          background-color: var(--el-color-primary-light-3);
        }

        &:active {
          background-color: var(--el-color-primary-dark-2);
        }
      }
    }
  }
}
</style>
